<template>
  <div :class="['web-card', round ? 'round' : '', disabled ? 'disabled' : '']" @click="handleClick">
    <div class="web-card-content"></div>
    <div class="web-card-footer">footer</div>
  </div>
</template>

<script lang="ts" setup name="WebCard">
interface cardProps {
  disabled?: boolean // 是否禁用
  round?: boolean //是否圆角
}
const props = withDefaults(defineProps<cardProps>(), {
  disabled: () => false,
  round: () => false
})

interface cardEmits {
  (e: 'click', evt: MouseEvent): MouseEvent
}
const emit = defineEmits<cardEmits>()

const handleClick = (evt: MouseEvent) => {
  if (props.disabled) return
  emit('click', evt)
}
</script>
